<template>
  <div class="m-contain edit">
    <van-nav-bar :title="this.getTitle()+'兑换券'"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="m-main">
      <div v-if='couponflag'>
        <div class="couponbox">
          <div class="top">
            <div class="left">
              <h3>{{getTitle()}}兑换券</h3>
              <p>使用此券1张可兑换{{getTitle()}}</p>
            </div>
            <div class="right">2张</div>
          </div>
          <div class="bottom">
            <p>使用间隔30天</p>
            <p>2020-08-01 12:00:00之后可用</p>
          </div>
        </div>
        <div class="btn">
          <van-button type="danger"
                      plain
                      round>立即使用</van-button>
        </div>
      </div>
      <div v-else
           class="nocoupon">
        <img :src="require('@/assets/image/person/nocoupon.png')"
             alt="">
        <p style="margin-top: 40px;">暂无兑换券</p>
        <p style="margin-top: 14px;">升级会员可获得兑换券</p>
      </div>
    </div>
  </div>
</template>
<script>

import Vue from 'vue';

import { NavBar, Button } from 'vant';

Vue.use(Button);
Vue.use(NavBar);
export default {
  name: "userInfo",
  data() {
    return {
      value: '',
      id: "",
      couponflag: true,  // 如果没又查到券，改为false 就好了
      list: {
        1: '鸡蛋',
        2: '四件套'
      }

    }
  },
  components: {

  },
  created() {
    this.id = this.$route.params.id || ""
    if (!this.id) {
      this.couponflag = false
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/mine')
    },
    getTitle() {
      return this.list[this.id] || "**"
    }
  }
}
</script>

<style>
.van-image__img {
  margin-top: 10px;
}
.van-cell__label {
  color: #333333;
}
.van-button {
  width: 100%;
}
</style>

<style lang="less" scoped>
.edit {
  min-height: 100vh;
  width: 100%;
  background-color: #fff;
  .van-cell {
    height: 63px;
  }
}
.couponbox {
  background: url('./../../../assets/image/person/coupon.png') no-repeat 0 0;
  width: 335px;
  height: 142px;
  background-size: contain;
  margin: 0 auto;
  margin-top: 24px;
  color: #fff;
  padding: 28px;
  .top,
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  .top {
    .left {
      h3 {
        font-size: 18px;
      }
      p {
        font-size: 13px;
        margin-top: 8px;
      }
    }
    .right {
      font-size: 22px;
    }
  }
  .bottom {
    font-size: 12px;
    margin-top: 32px;
    color: #ffcbcc;
  }
}
.nocoupon {
  img {
    width: 182px;
    height: 182px;
    margin: 0 auto;
    display: block;
    margin-top: 50px;
  }
  p {
    color: #666666;
    font-size: 15px;
    text-align: center;
  }
}
.btn {
  height: 46px;
  width: 82%;
  margin: 0 auto;
  margin-top: 76px;
}
</style>